<template>
    <el-dialog v-model="dialogFormVisible" title="修改账户信息" width="500">
        <el-form :model="formData">
        <el-form-item label="账号名" :label-width="formLabelWidth">
            <el-input v-model="formData.account" autocomplete="off" />
        </el-form-item>
        <el-form-item label="用户组" :label-width="formLabelWidth">
            <el-select v-model="formData.userGroup" placeholder="Please select a zone">
            <el-option label="超级管理员" value="超级管理员" />
            <el-option label="普通管理员" value="普通管理员" />
            </el-select>
        </el-form-item>
        </el-form>
        <template #footer>
        <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="accountEditSubmit">
                确认
            </el-button>
        </div>
        </template>
    </el-dialog>
    <el-table 
        ref="multipleTableRef"
        :data="accountListData.tableData"
        row-key="id"
        style="width: 100%"
        @selection-change="handleSelectionChange"
    >
        <el-table-column type="selection" :selectable="selectable" width="55"/>
        <el-table-column label="账号" width="120">
            <template #default="scope">{{ scope.row.account }}</template>
        </el-table-column>
        <el-table-column label="用户组" width="120">
            <template #default="scope">{{ scope.row.userGroup }}</template>
        </el-table-column>
        <el-table-column label="创建时间" width="120">
            <template #default="scope">{{ scope.row.ctime }}</template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                    编辑
                </el-button>
                <el-button
                    size="small"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                >
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
        <el-button type="danger" @click="start">批量删除</el-button> 
        <el-pagination
        v-model:current-page="accountListData.currentPage"
        v-model:page-size="accountListData.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="accountListData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        />
    </div>
</template>
  
<script setup>
    import { accountList } from '@/api/account'
    import { reactive,ref } from 'vue'
    import { accountDel } from '@/api/account'
    import { accountEdit } from '@/api/account'
    import dayjs from 'dayjs'
    const selectable = (row) => ![1, 2].includes(row.id)
    const size = ref('default')
    const background = ref(false)
    const disabled = ref(false)
    const dialogFormVisible = ref(false)
    const formLabelWidth = '140px'
    const selectData = ref([])
    const formData = reactive({
        id: '',
        account: '',
        userGroup: '',
    })
    const accountListData = reactive({
        currentPage: 1,
        pageSize: 5,
        tableData: [],
        total: 0,
    })
    const start=()=>{
        accountList({ currentPage: accountListData.currentPage, pageSize: accountListData.pageSize}).then(res=>{
            console.log(res);
            res.data.forEach(item => {
                item.ctime = dayjs(item.ctime).format("YYYY-MM-DD");
            })
            accountListData.tableData = res.data
            accountListData.total = res.total
        })
    }
    start()

    const handleSelectionChange = (val) => {
        selectData.value = val
        console.log(val);
    }

    const handleSizeChange = (val) => {
        accountListData.pageSize = val
        start();
    }


    const handleCurrentChange = (val) => {
        accountListData.currentPage = val
        start();
    }


    const handleEdit = (index, row) => {
        formData.account = row.account
        formData.userGroup = row.userGroup
        formData.id = row.id
        console.log(formData);
        
        dialogFormVisible.value = true;
        console.log(index, row)
    }

    const accountEditSubmit = () => {
        console.log(formData);
        
        accountEdit(formData).then(res => {
            if (res.code === 0) {
                ElMessage.success(res.msg);
                start();
            }else {
                ElMessage.error(res.msg);
            }
            dialogFormVisible.value = false;
        })
    }
    const handleDelete = (index, row) => {
        accountDel({ id: row.id }).then(res => {
            if (res.code === 0) {
                ElMessage.success(res.msg);
                start();
            }else {
                ElMessage.error(res.msg);
            }
        })
    }

</script>

<style lang="scss" scoped>
    .demo-pagination-block{
        height: 100px;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        padding-left: 40px;
    }
    :deep(.el-table__row){
        height: 58px;
    }
</style>